<template>
    <header>
        <div class="l-content">
            <el-button type="primary" icon="el-icon-menu"></el-button>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>
                    <a href="/">{{current.lable}}</a>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>



       <div class="r-content">
            <el-dropdown trigger="click">
                <span class="el-dropdown-link">
                    <img :src="userImg" alt="">
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                    <el-dropdown-item>退出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
       </div>
    </header>
</template>

<script>
import {mapState} from 'vuex'
export default {
    computed:{
        ...mapState({
            current:state => state.tab.currentMenu 
        })
    },
    data(){
        return {
            userImg:require("@/assets/images/user.png") 
        }
    }
}
</script>

<style lang="scss" scoped>
   header{
       width:100%;
       height:60px;
       display: flex;
       justify-content:space-between;
       align-items: center;
   }
   .el-dropdown-link img{
       width:50px;
       height:50px;
       border-radius: 30px;
       cursor:pointer;
   }
   .l-content{
       display: flex;
       justify-content:flex-start;
       align-items: center;
       color:#fff;
   }
   .el-breadcrumb{
       margin-left: 30px;
   }
</style>

<style lang="scss">
   .el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
       color:#fff;
   }
   .el-breadcrumb__inner{
       color:#fff;
   }
</style>